<template>
  <div>
    <div style="display: flex;margin-bottom: 10px">
      <el-select v-model="selectClubStatusValue" placeholder="请选择">
        <el-option
          v-for="item in optionsSelect"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>

      </el-select>
      <el-input
        placeholder="请输入社团名称"
        v-model="clubName"
        style="width: 200px;margin-left: 10px"
        clearable>
      </el-input>
      <el-button @click="getClubList" type="primary" style="margin-left: 10px" size="medium">查询</el-button>
    </div>

    <el-table
      :data="page.records"
      border
      style="width: 100%">

      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="社团描述：">
              <span>{{ props.row.clubDescribe }}</span>
            </el-form-item>
            <el-form-item label="社团通知：">
              <span>{{ props.row.clubNotice }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        fixed
        prop="id"
        label="ID"
        width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="社团名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="clubIntroduce"
        label="社团介绍"
        width="350">
      </el-table-column>
      <!--      <el-table-column-->
      <!--        prop="clubDescribe"-->
      <!--        label="社团描述"-->
      <!--        width="250">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="clubNotice"-->
      <!--        label="社团通知"-->
      <!--        width="250">-->
      <!--      </el-table-column>-->
      <el-table-column
        label="申请时间"
        width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ getDateTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="社团状态"
        width="100">
        <template slot-scope="scope">
          <div class="name-wrapper">
            <el-tag size="medium" v-if="scope.row.clubStatus==0">待审核</el-tag>
            <el-tag type="success" size="medium" v-if="scope.row.clubStatus==1">审核通过</el-tag>
            <el-tag type="warning" size="medium" v-if="scope.row.clubStatus==2">不通过</el-tag>
            <el-tag type="danger" size="medium" v-if="scope.row.clubStatus==3">禁用中</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column

        label="操作"
        width="250">
        <template slot-scope="scope">
          <div v-if="scope.row.clubStatus==1">
            <el-button @click="handleClick1(scope.row.id)" type="text" size="small">查看社团成员</el-button>
            <el-button @click="handleClick2(scope.row.id)" type="text" size="small">查看社团活动</el-button>
          </div>
          <div v-else>
            <el-button @click="handleClick(scope.row.createUserId)" type="text" size="small">查看创建人</el-button>
            <el-button type="text" size="small" @click="selectClub(scope.row)">审核</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      @current-change="changeClubList"
      :page-count="page.pages"
    >
    </el-pagination>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-select v-model="clubStatusValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateClub">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="创建人"
      :visible.sync="createUserVisible"
      center>
      <el-table :data="createUserData1">
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="sex" label="性别" width="100"></el-table-column>
        <el-table-column property="grade" label="年级" width="100"></el-table-column>
        <el-table-column property="phone" label="电话" width="150"></el-table-column>
        <el-table-column property="association" label="所属组织"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="createUserVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="社团成员"
      :visible.sync="memberVisible"
      class="dialog1"
      center>
      <el-table :data="memberData">
        <el-table-column property="name" label="姓名" width="100"></el-table-column>
        <el-table-column property="sex" label="性别" width="100"></el-table-column>
        <el-table-column property="grade" label="年级" width="100"></el-table-column>
        <el-table-column property="phone" label="电话" width="150"></el-table-column>
        <el-table-column property="association" label="所属组织"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="memberVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="社团活动"
      :visible.sync="activityVisible"
      center>
      <el-table :data="activityData">
        <el-table-column property="name" label="活动名称" width="150"></el-table-column>
        <el-table-column property="activityIntroduce" label="简介" width="250"></el-table-column>
        <el-table-column property="activityType" label="类型" width="100"></el-table-column>
        <el-table-column property="address" label="地址" width="150"></el-table-column>
        <el-table-column property="maxPerson" label="最大人数"></el-table-column>
        <el-table-column property="wechat" label="联系微信" width="150"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="activityVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import {getClubPageList, auditClub, getClubManager, getClubMember} from '../../../api/club.js';
import {getDateTime1} from '../../../utils/dateTimeUtil.js'
import {getClubActivity, getClubActivityList} from "../../../api/activity";

export default {
  name: "ClubAudit",
  data() {
    return {
      dialogVisible: false,
      createUserVisible: false,
      memberVisible: false,
      activityVisible: false,
      createUserData1: null,
      memberData: null,
      activityData: null,
      options: [{
        value: 0,
        label: '待审核'
      }, {
        value: 1,
        label: '审核通过'
      }, {
        value: 2,
        label: '不通过'
      }, {
        value: 3,
        label: '禁用'
      }],
      clubStatusValue: 0,
      clubList: [],
      page: {
        total: 2,
        current: 1,
        records: [],
        pages: 2,
      },
      selectedClub: null,
      selectClubStatusValue: -1,
      optionsSelect: [{
        value: -1,
        label: '全部'
      }, {
        value: 0,
        label: '待审核'
      }, {
        value: 1,
        label: '审核通过'
      }, {
        value: 2,
        label: '不通过'
      }, {
        value: 3,
        label: '禁用'
      }],
      clubName: null,
    }
  },
  created() {
    this.getClubList();
  },
  methods: {
    changeClubList(val) {
      console.log(val)
      this.page.current = val;
      this.getClubList();
    },
    getClubList() {
      getClubPageList({
        status: this.selectClubStatusValue,
        currentPage: this.page.current,
        clubName: this.clubName,
      }).then(res => {
        this.page = res.data;
        console.log(this.page.pages)
      })
    },
    handleClose() {
      this.dialogVisible = false;
    },
    selectClub(val) {
      this.selectedClub = val;
      this.dialogVisible = true;
    },
    updateClub() {
      this.dialogVisible = false;
      let temp = new Object();
      temp.id = this.selectedClub.id;
      temp.clubStatus = this.clubStatusValue;
      auditClub(temp).then(res => {
        this.getClubList();
      })
    },
    getDateTime(val) {
      return getDateTime1(val);
    },
    handleClick(createUserId) {
      console.log("sss:", createUserId)
      getClubManager({
        createUserId: createUserId,
      }).then(res => {
        if (res.code == 200) {
          console.log(res.data)
          this.createUserVisible = true;
          this.createUserData1 = res.data
        }
      })
    },
    handleClick1(clubId) {
      getClubMember({
        clubId: clubId,
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.memberVisible = true
          this.memberData = res.data
        }
      })
    },
    handleClick2(clubId) {
      getClubActivityList({
        clubId: clubId
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.activityVisible = true
          this.activityData = res.data
        }
      })
    }
  }
}

</script>

<style scoped>
.demo-table-expand {
  margin: 10px;
}

.demo-table-expand {
  font-size: 0;
  text-decoration: none;
  margin: 20px;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
</style>
